<ion-header class="wide-header">
  <ion-navbar>
    <ion-title class="bp-title">
      <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
        <img src="assets/img/coinbase/coinbase-logo.png" width="70">
      </div>
    </ion-title>
    <ng-content select="[right]"></ng-content>
  </ion-navbar>
</ion-header>

<ion-content #scrollArea>
  <div class="wrapper">
    <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
      <ion-toolbar class="wide-header__title">
        <expandable-header-primary>
          <img src="assets/img/coinbase/coinbase-logo.png" width="150">
        </expandable-header-primary>
      </ion-toolbar>
    </expandable-header>

    <div *ngIf="hasCredentials" class="center-header">
      <div padding text-center>
        <div *ngIf="!showOauthForm" translate>Manage your Coinbase account, check balances, deposit and withdraw funds between wallets.</div>
        <div *ngIf="showOauthForm" translate>If you have trouble, contact Coinbase support for direct assistance.</div>
        <button margin-top *ngIf="!showOauthForm" ion-button class="button-standard" (click)="openAuthenticateWindow()" translate>Connect Coinbase Account</button>
        <button margin *ngIf="!showOauthForm" ion-button clear small color="dark" (click)="openSignupWindow()" translate>Sign Up for Coinbase &rarr;</button>
      </div>
      <div *ngIf="showOauthForm" margin>
        <form [formGroup]="oauthCodeForm" (ngSubmit)="submitOauthCode(oauthCodeForm.value.code)">
          <ion-label stacked><span translate>OAuth Code</span></ion-label>
          <ion-input type="text" formControlName="code" [value]="oauthCodeForm.value.code" placeholder="{{'Enter OAuth Code'}}" required></ion-input>
          <button ion-button class="button-standard" type="submit" [disabled]="!oauthCodeForm.valid" translate>Connect Coinbase Account</button>
        </form>
        <button margin-top ion-button block clear small color="dark" (click)="openSupportWindow()">
          <span translate>Coinbase Support</span> &rarr;
        </button>
      </div>
    </div>
    <div *ngIf="!hasCredentials" text-center translate>
      Missing Credentials
    </div>
  </div>
</ion-content>
